<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="训练类型">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="分类包" name="classifyPkg">

                    <el-button size="small" type="primary" @click="addClassfy">新建分类包</el-button>
                        <el-row :gutter="12">
                            <el-col :span="8" v-for="(item,i) in classifyFiles">
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
                                        <el-input type="text" v-model="item.name"style="width: 25%;" size="mini"></el-input>
                                        <!--                                <span>卡片名称</span>-->
                                        <i v-if="i !== 0" class="el-icon-close"style="float: right;" @click="removeClassfy(item)"></i>
                                    </div>
                                    <el-button style="float: right;" @click="addClassfyFile(item)" type="text">新增</el-button>
                                    <div v-for="(o,index) in item.paths" :key="o" class="text item">
                                        <!--                                {{'列表内容 ' + o }}-->
<!--                                        <input type="file" id="test"  @change="changeFile($event)"  webkitdirectory >filename</input>&lt;!&ndash;multiple="multiple"&ndash;&gt;-->
                                        <el-col :span="20">
                                            <div class="custom-file"><!--classifyFiles[i]['paths'][index] = getFilesURL($event.target.files)-->
                                                <input type="file" class="custom-file-input" @change="changeFile($event);(classifyFiles[i]['paths'][index] = getFilesURL($event.target.files))" id="customFile"webkitdirectory>
                                                <label class="custom-file-label"  for="customFile">choose file</label>
                                            </div>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button v-if="index !== 0" @click.prevent="removeClassfyFile(i,index)"type="text">删除</el-button>
                                        </el-col>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                    </el-tab-pane>
                    <el-tab-pane label="分割包" name="slicePkg">
                        <el-button size="small" type="primary" @click="addSlice">新建分割包</el-button>
                        <el-row :gutter="12">
                            <el-col :span="24" >
                                <el-card class="box-card">
                                    <div slot="header" class="clearfix">
<!--                                        <span>组{{i+1}}</span>-->
                                        <el-col :span="8" >原图</el-col>
                                        <el-col :span="8" >掩模图</el-col>
                                        <el-col :span="8" >roi图</el-col>
                                    </div>
                                    <div  class="text item" v-for="(u,i) in sliceFiles">
                                        <el-row :gutter="12">
                                            <el-col :span="8" >
<!--                                                <input type="file"   @change="sliceFiles[i]['origin'] = getFilesURL($event.target.files)"  webkitdirectory >filename</input>&lt;!&ndash;multiple="multiple"&ndash;&gt;-->
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" @change="changeFile($event);sliceFiles[i]['origin'] = getFilesURL($event.target.files)" id="customFile"webkitdirectory>
                                                    <label class="custom-file-label"  for="customFile">choose file</label>
                                                </div>
                                            </el-col>
                                            <el-col :span="8" >
<!--                                                <input type="file"   @change="sliceFiles[i]['mask'] = getFilesURL($event.target.files)"  webkitdirectory >filename</input>&lt;!&ndash;multiple="multiple"&ndash;&gt;-->
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" @change="changeFile($event);sliceFiles[i]['mask'] = getFilesURL($event.target.files)" id="customFile"webkitdirectory>
                                                    <label class="custom-file-label"  for="customFile">choose file</label>
                                                </div>
                                            </el-col>
                                            <el-col :span="6" >
<!--                                                <input type="file"   @change="sliceFiles[i]['roi'] = getFilesURL($event.target.files)"  webkitdirectory >filename</input>&lt;!&ndash;multiple="multiple"&ndash;&gt;-->
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" @change="changeFile($event);sliceFiles[i]['roi'] = getFilesURL($event.target.files)" id="customFile"webkitdirectory>
                                                    <label class="custom-file-label"  for="customFile">choose file</label>
                                                </div>
                                            </el-col>
                                            <el-button v-if="i !== 0" @click.prevent="removeSlice(i)"type="text">删除</el-button>
                                        </el-row>

                                    </div>
                                </el-card>
                            </el-col>


                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="检测包" name="detectionPkg">
                        <el-button size="small" type="primary" @click="addDetection">新建检测包</el-button>
                        <el-row :gutter="12" v-for="(item,index) in detectionFiles">
                            <el-col :span="12" >
<!--                                <input type="file" id="test"  @change="changeFile($event)"  webkitdirectory >filename</input>-->
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" @change="changeFile($event);detectionFiles[index] = getFilesURL($event.target.files)" id="customFile"webkitdirectory>
                                    <label class="custom-file-label"  for="customFile">choose file</label>
                                </div>

                            </el-col>
                            <el-button v-if="index !== 0" @click.prevent="removeDetection(index)"type="text">删除</el-button>
                        </el-row>

                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="打包格式">
                <el-select v-model="form.region" placeholder="please select your zone">
                    <el-option label="pkl" value="pkl" />
                    <el-option label="lmdb" value="lmdb" />
                </el-select>
            </el-form-item>
            <el-form-item label="打包路径">
<!--                <input type="file"   @change="changeFile($event)"  webkitdirectory >{{packfilepath}}</input>-->
                <el-col :span="12" >
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" @change="changeFile($event)" id="customFile"webkitdirectory>
                        <label class="custom-file-label"  for="customFile">choose file</label>
                    </div>
                </el-col>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">打包数据</el-button>
<!--                <el-button @click="onCancel">Cancel</el-button>-->
            </el-form-item>
        </el-form>
        <el-main>
            <el-collapse v-model="activeNames" @change="">
                <el-collapse-item title="控制台" name="1">
                    <div id="terminal" style="margin-bottom: 2px" ref="terminal"></div>
                </el-collapse-item>

            </el-collapse>
        </el-main>
    </div>
</template>

<script>
    import { MessageBox, Message,Loading } from 'element-ui'
    import $ from 'jquery'
    import { Terminal } from "xterm"
    import "xterm/css/xterm.css"
    import "xterm/lib/xterm.js"
    var term
    export default {
        name: "datapack",
        data () {
            return {
                activeNames: ['1'],
                filepath:"",
                packfilepath:"",
                uploader_key: new Date().getTime(), //这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
                options: {
                    target: '/uploadCategory', //SpringBoot后台接收文件夹数据的接口
                    testChunks: false, //是否分片-不分片
                    autoStart: false
                },
                activeName: 'classifyPkg',//detectionPkg,slicePkg
                classifyFiles: [{name: "class1", paths: ['']}],
                detectionFiles: [""],
                sliceFiles: [{origin: "", mask: "", roi: ""}],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            handleClick () {

            },
            addDetection () {
                this.detectionFiles.push("")
            },
            addSlice () {
                this.sliceFiles.push({origin: "", mask: "", roi: ""})
            },
            addClassfy () {
                console.log(999)
                this.classifyFiles.push({name: "class" + (this.classifyFiles.length + 1), paths: ['']})
            },
            addClassfyFile (obj) {
                obj["paths"].push("")
                console.log(this.classifyFiles)
            },
            removeClassfy (index) {
                this.classifyFiles.splice(index, 1)
            },
            removeClassfyFile (i,index) {
                console.log(i, index)
                this.classifyFiles[i]["paths"].splice(index, 1)
            },
            removeSlice (index) {
                this.sliceFiles.splice(index, 1)
            },
            removeDetection (index) {
                this.detectionFiles.splice(index, 1)
            },
            changeFile (e, type) {
                let dir = this.getFilesURL(e.target.files)
                let dirs = dir.split(dir.substr(dir.length - 1, 1))
                $(e.target).next().text(dirs[dirs.length - 2])
                // console.log(e.target.files)
                // console.log(this.getFilesURL(e.target.files))
                this.packfilepath = this.getFilesURL(e.target.files)
            },
            getFilesURL (files) {
                console.log(files)
                if (files.length === 0) {
                    return ""
                }
                return files[0].path.replace(files[0].name, "") ;
            },
            onSubmit () {
                if (this.activeName === 'classifyPkg') {
                    this.classifyFiles.forEach(function (val, i, arr) {
                        console.log(val)
                        if (val['paths'].length === 0) {
                            Message("请选择非空目录！")
                            return ""
                        }
                    })
                } else if (this.activeName === 'slicePkg') {
                    this.sliceFiles.forEach(function (val, ii, arr) {
                        console.log(val)
                        for (let item in val) {
                            if (val[item] === ''){
                                Message("请选择非空目录！")
                                return ""
                            }
                        }
                    })
                } else {
                    console.log(this.detectionFiles)
                    if (this.detectionFiles.length === 0) {
                        Message("请选择非空目录！")
                        return ""
                    }
                }
            }
        },
        mounted() {
            term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: 30, //行数
                // cols: parseInt(_this.cols), // 不指定行数，自动回车后光标从下一行开始
                convertEol: true, //启用时，光标将设置为下一行的开头
                //   scrollback: 50, //终端中的回滚量
                disableStdin: false, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                theme: {
                    foreground: "#7e9192", //字体
                    background: "#002833", //背景色
                    cursor: "help", //设置光标
                    lineHeight: 16
                }
            });
            // 挂载到dom
            term.open(this.$refs["terminal"]);
            term.writeln("Welcome to use Superman... ");
        }
    }
</script>

<style scoped>

</style>